<template>
  <div class="header">
    <div class="title">TodoList</div>
    <input type="text" v-model="title" @keyup.enter="submitTitle">
<!--    <button class="button small" @click="changeTodoType('/completed')">已完成</button>-->
    <router-link class="button small" v-if="showCompleted" :to="{ name: 'completed', params: { a: 1 } }">已完成</router-link>
<!--    <router-link class="button small" :to="'/completed'">已完成</router-link>-->
    <button class="button small" v-else @click="changeTodoType('undone')">未完成</button>
  </div>
</template>

<script>
import { defineComponent, ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
export default defineComponent({
  name: 'header',
  setup (props, context) {
    const router = useRouter()
    const route = useRoute()
    const title = ref('')
    const showCompleted = computed(() => route.path !== '/completed')
    const submitTitle = () => {
      context.emit('add-item', { title })
      title.value = ''
    }
    const changeTodoType = (name) => {
      // 当路由跳转时要传参就必须使用name来确定路由而不是用path
      router.push({ name: name, params: { b: 2 } })
    }
    return {
      title,
      showCompleted,
      submitTitle,
      changeTodoType
    }
  }
})
</script>

<style scoped>
  .header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    background-color: #000000;
  }
  .title {
    color: #ffffff;
    font-size: 28px;
    font-weight: bold;
  }
  .header input {
    width: 300px;
    height: 25px;
    border-radius: 5px;
    margin: 0 100px;
    padding-left: 10px;
    border: none;
    outline: none;
  }
  .header input:hover {
    border: none;
  }
  .header button, .header a {
    margin: 0 20px !important;
  }
</style>
